<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			[v-cloak] {
				display: none;
			}
			
			.lee_div {
				position: fixed;
				width: 100%;
				height: 100%;
				top: -100%;
				transition: all .8s;
				left: 0;
				background: rgba(0,0,0,0.5);
				text-align: center;
				opacity: 1;
				/*line-height: 100%;*/
			}
			.lee_div>img{
				width: 40%;
				position: relative;
			}
		</style>
	</head>

	<body>
		<div id="box" v-cloak>
			<div style="width: 200px;float: left;height: 200px;" v-for="i in arr" v-lee="i">
				<img :src="i" style="width: 100%;height: 100%;" />
			</div>
		</div>
	</body>
	<script src="../js/vue.js"></script>
	<script>
		Vue.directive('lee', (a, b, c, d) => {
			a.onclick = function() {
				var div = document.createElement('div')
				div.className = 'lee_div'
				div.innerHTML = `
				   <img src="${b.value}" />
				`
				box.append(div)
				var img = div.getElementsByTagName('img')[0]
				imgheight = img.offsetHeight
				divheight = div.offsetHeight
				img.style.top = (divheight-imgheight)/2+'px'
				div.style.top = 0
				console.log(divheight)
				div.onclick = function(){
					div.style.opacity = 0
					setTimeout(()=>{
						box.removeChild(div)
					},800)
				}
			}
		})
		new Vue({
			el: "#box",
			data: {
				arr: ['../img/wt/1.jpg','../img/wt/2.jpg','../img/wt/3.jpg','../img/wt/4.jpg','../img/wt/5.jpg','../img/wt/6.jpg','../img/wt/7.jpg','../img/wt/8.jpg']
			}
		})
	</script>

</html>